<template>
  <div>
    <el-input class="left" v-model="state.params.username" style="width: 200px;"  clearable @clear="getlist()" placeholder="请输访客姓名" />
    <el-button class="left" type="primary" @click="getlist()">查询</el-button>
  </div>
  <!-- 表格 -->
  <el-table  :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"  :data="state.datalists" border style="width: 99%;margin: auto; margin-top: 10px;">
    <el-table-column   prop="name" label="访客姓名" />
    <el-table-column prop="username" label="核销姓名" />
    <el-table-column prop="addtime" label="核销时间" />
  </el-table>
  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 15, 20]"
      :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="state.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { reviewerlist } from "../../api/journal"

const state = reactive<any>({
  params: { page: 1, pageSize: 5 },
  total: 0,
  formdata: {
    name: ""
  },
  datalists: []
})
// 列表
const getlist = async () => {
  let res = await reviewerlist(state.params)
  console.log(res);
  state.total = res.data.total
  state.datalists = res.data.list
}
getlist()
//分页
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
  state.params.pageSize = val
  getlist()
}
const handleCurrentChange = (val: number) => {
  state.params.page = val
  getlist()
}
</script>

<style lang="less" scoped>
.demo-pagination-block{
  margin-left: 100px;
}
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

:deep(.el-table .cell) {
  text-align: center;
  font-size: 14px;
  color: #606266;
}

.left {
  margin-left: 10px;
}
.el-pagination{
  float: right;
  margin-top: 20px;
}
</style>